<template>
  <div class="container">
    <div class="opt-area-02">
      <div class="left-con">
        <div class="input-frame" style="width: 230px">
          <Select placeholder="请选择所属区域" v-model="params.company_id" style="width:210px">
            <Option v-for="item in addressList" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </div>
        <Button type="info" @click="selectList(1)" style="margin-top: 0px;margin-right:10px">搜索</Button>
        <Button type="info" @click="addShow" style="margin-top: 0px;margin-right:10px">新增</Button>
      </div>
    </div>
    <Table :loading="loading" border :columns="columns" :data="dataList" size="small" ref="table">
      <template slot="action" slot-scope="{ row }">
        <Row style="margin-bottom: 5px; margin-top: 2px">
          <Button class="table-action-btn" style="margin-right: 5px" type="info" size="small" @click="editShow(row)">编辑</Button>
          <Button class="table-action-btn" style="margin-right: 5px" type="info" size="small" @click="deleteShow(row)">删除</Button>
        </Row>
      </template>
    </Table>
    <Row type="flex" justify="end" class="page_style">
      <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize" show-elevator
            @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
    </Row>
    <Modal width="720" v-model="modal" style="align-content: center" :title="showTitle">
      <Row class="item1">
        <Col span="4" style="text-align: right" class=""><span style="color: red">*</span>所属行政区域:</Col>
        <Col span="17" offset="1">
          <Select placeholder="请选择所属行政区域" clearable v-model="addData.REGION_CODE">
            <Option v-for="item in addressList" disabled :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </Col>
      </Row>
      <Row class="item1">
        <Col span="4" style="text-align: right" class=""><span style="color: red">*</span>地址:</Col>
        <Col span="17" offset="1">
          <Input v-model="addData.COMP_ADDRESS">
            <template #prepend>
            <span>辽宁省沈阳市</span>
          </template>
          </Input>
        </Col>
      </Row>
      <Row class="item1">
        <Col span="4" style="text-align: right" class="">地址坐标:</Col>
        <Col span="17" offset="1" >
          <Input disabled v-model="addData.csc_mapjson_ht" style="width: 300px"></Input>
          <Button style="margin-left: 50px" @click="pickPointMethod">选择</Button>
        </Col>
      </Row>
      <Row class="item1">
        <Col span="4" style="text-align: right" class=""><span style="color: red">*</span>负责人:</Col>
        <Col span="6" offset="1">
          <Select placeholder="请选择负责人" v-model="addData.PRINCIPAL_EMPL_ID">
            <Option v-for="item in communityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </Col>
        <Col span="4" style="text-align: right" class=""><span style="color: red">*</span>面积(m²):</Col>
        <Col span="6" offset="1">
          <InputNumber v-model="addData.SER_CENTER_AREA" :max="100000" :min="0" :step="1.2" style="width: 100%"></InputNumber>
        </Col>
      </Row>
      <Row class="item1">
        <Col span="4" style="text-align: right" class=""><span style="color: red">*</span>联系人:</Col>
        <Col span="6" offset="1">
          <Input v-model="addData.COMP_EMPL" style=""></Input>
        </Col>
        <Col span="4" style="text-align: right" class=""><span style="color: red">*</span>联系方式:</Col>
        <Col span="6" offset="1">
          <Input v-model="addData.COMP_TEL" style=""></Input>
        </Col>
      </Row>
      <Row class="item1">
        <Col span="4" style="text-align: right" class=""><span style="color: red">*</span>开放时间(上午):</Col>
        <Col span="6" offset="1">
          <Input v-model="addData.AM_TIME_DESC" style=""></Input>
        </Col>
        <Col span="4" style="text-align: right" class=""><span style="color: red">*</span>开放时间(下午):</Col>
        <Col span="6" offset="1">
          <Input v-model="addData.PM_TIME_DESC" style=""></Input>
        </Col>
      </Row>
      <Row class="item1">
        <Col span="4" style="text-align: right" class="">工作人员数量:</Col>
        <Col span="6" offset="1">
          <InputNumber v-model="addData.EMPL_NUM" :max="100000" :min="0" :step="1" style="width: 100%"></InputNumber>
        </Col>
      </Row>
      <Row class="item1">
        <Col span="4" style="text-align: right" class=""><span style="color: red">*</span>服务人员:</Col>
        <Col span="17" offset="1" style="margin-top: auto">
          <Select v-model="addData.SER_EMPL_IDS" multiple>
            <Option v-for="item in communityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </Col>
      </Row>
      <Row class="item1">
        <Col span="4" style="text-align: right" class="">功能介绍:</Col>
        <Col span="17" offset="1" style="margin-top: auto">
          <Input v-model="addData.FUN_DESC" type="textarea"></Input>
        </Col>
      </Row>
      <div slot="footer">
        <Button type="success" @click="addInfo">保存</Button>
        <Button type="error" @click="modal=false">关闭</Button>
      </div>
    </Modal>
    <PickPoint ref="DangQunPickPoint" @HTreturnMapMarkerInfoDangqun="HTreturnMapMarkerInfoDangqun"></PickPoint>
  </div>
</template>

<script>

import { addDangQunZhongXiInfo, findDangQunZhongXiInfoList, updateDangQunZhongXiInfo, deleteDangQunZhongXiInfo, selectSheQuGanShiInfo } from '@/api/dangqun'
import { newGetCompanyInfo } from '@/api/z-new-grid'
import PickPoint from '../components/pickPoint.vue'
import { findSubordinateList } from '@/api/eventlist'
export default {
  name: 'index',
  components: { PickPoint },
  data () {
    return {
      showTitle: '',
      modal: false,
      dataList: [],
      communityList: [],
      loading: false,
      columns: [
        { title: '党群服务中心名称', key: 'NAME', align: 'center' },
        { title: '所属区域', key: 'REGION_CODE_NAME', align: 'center' },
        { title: '负责人', key: 'STREET_EMPL_NAME', align: 'center' },
        { title: '面积(m²)', key: 'SER_CENTER_AREA', align: 'center' },
        { title: '联系人', key: 'COMP_EMPL', align: 'center' },
        { title: '联系方式', key: 'COMP_TEL', align: 'center' },
        { title: '开放时间', key: 'AM_TIME_DESC', align: 'center' },
        { title: '工作人员', key: 'EMPL_NUM', align: 'center' },
        { title: '操作', align: 'center', width: 160, slot: 'action', fixed: 'right' }
      ],
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0,
        company_id: ''
      },
      addData: {
        AM_TIME_DESC: '',
        COMP_ADDRESS: '',
        COMP_EMPL: '',
        COMP_TEL: '',
        EMPL_NUM: 0,
        FUN_DESC: '',
        GIS_LAT: '',
        GIS_LON: '',
        NAME: '',
        PM_TIME_DESC: '',
        PRINCIPAL_EMPL_ID: '',
        REGION_CODE: '',
        SER_CENTER_AREA: 0,
        SER_EMPL_IDS: [],
        STREET_EMPL_NAME: ''
      },
      severUserInfo: {},
      addressList: [],
      itemList: [
        { value: 'REGION_CODE', label: '所属行政区域' },
        { value: 'COMP_ADDRESS', label: '地址' },
        { value: 'PRINCIPAL_EMPL_ID', label: '负责人' },
        { value: 'SER_CENTER_AREA', label: '面积(m²)' },
        { value: 'COMP_EMPL', label: '联系人' },
        { value: 'COMP_TEL', label: '联系方式' },
        { value: 'AM_TIME_DESC', label: '开放时间(上午)' },
        { value: 'PM_TIME_DESC', label: '开放时间(下午)' },
        { value: 'SER_EMPL_IDS', label: '服务人员' }
      ]
    }
  },
  watch: {
    'severUserInfo.company_grade' () {
      this.findDistrictList(this.severUserInfo.parent_id)
      this.params.company_id = ''
      this.Adisabled = true
      this.Bdisabled = true
    }
  },
  methods: {
    init () {
      findDangQunZhongXiInfoList(this.params).then(ret => {
        if (ret.data.errcode === 0) {
          this.dataList = ret.data.data.results
          this.params.totalRecord = ret.data.data.totalRecord
          this.loading = false
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    selectList (e) {
      this.params.pageNo = e
      this.init()
    },
    pageAction (page) {
      this.params.pageNo = page
      this.init()
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.selectList(this.params.pageNo)
    },
    findDistrictList (val) {
      findSubordinateList({ grade: 4, id: val }).then(ret => {
        if (ret.data.errcode === 0) {
          let item = []
          item = ret.data.data
          item.forEach(res => {
            if (res.id === this.severUserInfo.company_id) {
              this.addressList.push(res)
            }
          })
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    selectSheQuGanShiList () {
      selectSheQuGanShiInfo().then(ret => {
        if (ret.data.errcode === 0) {
          this.communityList = ret.data.data
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    addInfo () {
      for (let i = 0; i < this.itemList.length; i++) {
        if (this.addData[this.itemList[i].value] === undefined || this.addData[this.itemList[i].value].length === 0) {
          this.$Notice.error({ title: this.itemList[i].label, desc: '不能为空！' })
          return
        }
      }
      let url_post = this.addData.ID === undefined ? addDangQunZhongXiInfo : updateDangQunZhongXiInfo
      url_post(this.addData).then(ret => {
        if (ret.data.errcode === 0) {
          this.modal = false
          this.$Notice.success({ title: '操作成功' })
          this.init()
        } else {
          this.$Notice.error({ title: '失败', desc: ret.data.errmsg })
        }
      })
    },
    addShow (item) {
      this.addData = {
        AM_TIME_DESC: '',
        COMP_ADDRESS: '',
        COMP_EMPL: '',
        COMP_TEL: '',
        EMPL_NUM: 0,
        FUN_DESC: '',
        GIS_LAT: '',
        GIS_LON: '',
        NAME: '',
        PM_TIME_DESC: '',
        PRINCIPAL_EMPL_ID: '',
        REGION_CODE: '',
        SER_CENTER_AREA: 0,
        SER_EMPL_IDS: [],
        STREET_EMPL_NAME: ''
      }
      this.addData.REGION_CODE = this.severUserInfo.company_id
      this.showTitle = '添加详情'
      this.modal = true
    },
    editShow (item) {
      this.addData = item
      this.addData.REGION_CODE = this.severUserInfo.company_id
      if (typeof (item.SER_EMPL_IDS) === 'string') {
        this.addData.SER_EMPL_IDS = JSON.parse(item.SER_EMPL_IDS)
      }
      this.addData.csc_mapjson_ht = this.addData.GIS_LAT + ',' + this.addData.GIS_LON
      this.showTitle = '编辑详情'
      this.modal = true
    },
    deleteShow (item) {
      let param = {
        ID: item.ID
      }
      this.$Modal.confirm({
        title: '确认删除么？',
        content: '请仔细核对后再操作',
        onOk: () => {
          deleteDangQunZhongXiInfo(param).then(ret => {
            if (ret.data.errcode === 0) {
              this.$Notice.success({ title: '操作成功' })
              this.init()
            } else {
              this.$Notice.error({ title: '失败', desc: ret.data.errmsg })
            }
          })
        }
      })
    },
    pickPointMethod () {
      let data = {
        id: this.severUserInfo.company_id
      }
      newGetCompanyInfo(data).then(ret => {
        if (ret.data.errcode === 0) {
          console.log(111)
          if (this.showTitle === '添加详情') {
            console.log(222)
            this.$refs.DangQunPickPoint.init('insert', ret.data.data, {})
          }
          if (this.showTitle === '编辑详情') {
            this.addData.grade = '5'
            this.$refs.DangQunPickPoint.init('update', ret.data.data, this.addData)
          }
        } else {
          this.$Notice.error({ title: '失败', desc: ret.data.errmsg })
        }
      })
    },
    HTreturnMapMarkerInfoDangqun (e) {
      this.addData.csc_mapjson_ht = e.csc_mapjson_ht
      this.addData.GIS_LON = this.addData.csc_mapjson_ht.split(',')[1]
      this.addData.GIS_LAT = this.addData.csc_mapjson_ht.split(',')[0]
      this.modal = false
      this.$nextTick(() => {
        this.modal = true
      })
    }
  },
  mounted () {
    this.severUserInfo = this.$store.state.user.severUserInfo
    this.selectSheQuGanShiList()
    this.init()
  }
}
</script>

<style scoped>
.container {
  padding: 12px;
}
.page_style {
  margin: 20px 5px;
}

.input-frame {
  width: 120px;
  margin-right: 10px;
  float: left;
}

.house-list > .group {
  background: white;
  padding: 10px;
  margin-top: 10px;
}

.house-list > .group > .item {
  border-bottom: 1px solid #f5f5f5;
  padding: 10px 0;
}

.house-list > .group > .item .top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.house-list > .group > .item .title {
  font-size: 14px;
  color: #333333;
}

.house-list > .group > .item .address {
  font-size: 12px;
  color: rgb(128, 128, 128);
  display: flex;
  align-items: center;
}

.house-list > .group > .item .detail {
  font-size: 12px;
  color: dodgerblue;
}

.item1 {
  height: 42px;
  line-height: 40px;
}

.opt-area-02 {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 1px solid #abdcff;
  background-color: #f0faff;
  padding: 8px 16px 8px 16px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.opt-area-02 .right-con {
  width: 100%;
  margin-top: 5px;
  display: flex;
}

.opt-area-02 .left-con {
  font-size: 14px;
  width: 100%;
}

.opt-area-02 .left-con span {
  font-weight: bold;
}

.opt-area-02 .right-con input {
  width: 150px;
  margin-right: 10px;
}

.opt-area-02 .right-con .input-frame {
  width: 200px;
  margin-right: 10px;
}

.table-action-btn {
  margin-bottom: 3px;
}

.container >>> .ivu-btn-small {
  height: 24px;
  padding: 0 5px;
  font-size: 12px;
  border-radius: 3px;
}

.btn-action {
  margin-bottom: 10px;
}

.mp10 {
  margin-right: 10px;
}
.title-style {
  color: red;
}
.mb20 {
  margin-bottom: 20px;
}
.ivu-table-row {
  height: 57px;
}
.demo-spin-icon-load{
  animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
  from { transform: rotate(0deg);}
  50%  { transform: rotate(180deg);}
  to   { transform: rotate(360deg);}
}
.red-star {
  font-family: SimSun;
  color: #f00;
  margin-right: 4px;
}
.demo-spin-col{
  height: 100px;
  position: relative;
  /*border: 1px solid #eee;*/
}
.container>>>.ivu-icon-ios-arrow-forward:before{
  color: black;
}
</style>
